const path = require('path') //这是引用 node 里的一个包,它会提供一些函数

//引入plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    entry: './src/main.js', //入口文件配置
    output: {
        path: path.resolve(__dirname, 'dist'), //打包的路径
        filename: 'bundle.js', //打包的文件名
        //publicPath: 'dist/' //会在 url 前面加上一个路径,当使用 htmlwebpackplugin插件时,这个可以省略了.
    },
    module: {
        rules: [{
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
        }, {
            test: /\.vue$/,
            use: ['vue-loader']
        }, ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html' //打包的时候以哪个模板文件打包
        })
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' //指定 vue 使用 runtime-compiler 版本
        }
    },
    devServer: {
        contentBase: './dist', //加载的内容路径
        inline: true //根据代码的变化进行实时加载
    }
}